<script setup lang="ts">
import tasksubmit from '@/components/taskmanager/tasksubmit.vue';

// 定义响应式变量
const formData = ref({
  cluster_type: '',
  task_type: '',
  cluster_nodes: '',
});


// 控制弹窗显示的变量
const showDialog = ref(true);

//modal
const dialog = ref(false)


// 跳转提交的弹窗页面
function goToSubmitDialog() {
  const clusterType:string = formData.value.cluster_type
  const taskType:string = formData.value.task_type
  const clusterNodes:string = formData.value.cluster_nodes
  if(clusterType&&taskType&&clusterNodes){
    showDialog.value = true; // 显示弹窗
  }else{
    dialog.value = true
  }
}
</script>

<template>
  
  <v-card class="pa-4">
    <!-- 表单字段 -->
    <v-row>
      <v-label>填写任务基础信息</v-label>
    </v-row>
    <v-row>
      <v-col cols="12" sm="6">
        <v-select
          v-model="formData.cluster_type"
          label="集群类型"
          :items="['云集群', '边集群', '端设备']"
        />
      </v-col>
      <v-col cols="12" sm="6">
        <v-select
          v-model="formData.task_type"
          label="任务类型"
          :items="['Task', 'Workflow']"
        />
      </v-col>
      <v-col cols="12" sm="6">
        <v-select
          v-model="formData.cluster_nodes"
          label="集群节点"
          :items="['节点1', '节点2', '节点3', '节点4']"
        />
      </v-col>
    </v-row>
    <!-- 提交按钮 -->
    <v-row>
      <v-col cols="12" class="text-right">
        <v-btn color="success" @click="goToSubmitDialog()">创建任务工作流</v-btn>
        <!-- 弹窗组件 -->
        <tasksubmit  v-if="showDialog" v-model="formData" class="dialog"  @close="showDialog = false"  />
      </v-col>
    </v-row>
     <!-- 弹窗组件 -->
    <v-dialog v-model="dialog" max-width="290">
      <v-card>
        <v-card-title class="headline">消息提醒</v-card-title>
        <v-card-text>请选择对应的集群类型、任务类型和集群节点！！不得为空！</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" text @click="dialog = false">知道了</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-card>
</template>
<style>
.dialog{
  margin-top: 5%;
  text-align: left;
}
</style>

